<script setup>
import "quarkd/lib/tabbar";
import "@quarkd/icons/lib/order";
import "@quarkd/icons/lib/edit";
import "@quarkd/icons/lib/setting";
import '@quarkd/icons/lib/user';
import '@quarkd/icons/lib/edit';

import { useRouter } from 'vue-router';
import { useLoginedStore } from '@/stores/logined';

const store = useLoginedStore();

const router = useRouter();

function tabbarChange({detail}) {
  router.push({ name: detail.value });
}

</script>

<template>
  <!--路由出口-->
  <router-view></router-view>
  <!--底部固定导航栏-->
  <quark-tabbar fixed @change="tabbarChange" v-if="store.logined">
    <!--这里事先约定好name属性值就是路由记录的名称-->
    <quark-tabbar-item label="用户管理" name="userManager">
      <quark-icon-order slot="icon" size="40" />
    </quark-tabbar-item>
    <quark-tabbar-item label="文件管理" name="fileManager">
      <quark-icon-edit slot="icon" size="40" />
    </quark-tabbar-item>
    <quark-tabbar-item label="个人设置" name="personal">
      <quark-icon-setting slot="icon" size="40" />
    </quark-tabbar-item>
  </quark-tabbar>
  <quark-tabbar fixed @change="tabbarChange" v-else>
    <!--这里事先约定好name属性值就是路由记录的名称-->
    <quark-tabbar-item label="登录" name="login">
      <quark-icon-user slot="icon" size="40" />
    </quark-tabbar-item>
    <quark-tabbar-item label="注册" name="register">
      <quark-icon-edit slot="icon" size="40" />
    </quark-tabbar-item>
  </quark-tabbar>
</template>

<style scoped>
</style>